<template>
	<div class="solutionDetail">
		<div class="title">{{ title }}</div>
		<div class="keyWord">
			<div class="title">关键词</div>
			<div class="content">
				<div class="item" v-for="(item, index) in keywordList" :key="index">{{ item }}</div>
			</div>
		</div>
		<div class="video" v-if="videoUrl">
			<div class="title">视频</div>
			<video :src="videoUrl"  :autoplay="false"></video>
		</div>
		<div class="richText" v-html="content"></div>
		<div class="button">
			<div class="left">
				<button open-type="share" class="box">
					<div class="share" @click="share">
						<div class="iconfont icon-fenxiang"></div>
						分享
					</div>
				</button>
				<div class="collect">
					<uni-icons type="star-filled" size="20" class="start" @click="collection" :color="favorite ? '#FF4D4D' : '#D3D3D3'"></uni-icons>
					收藏
				</div>
			</div>
			<div class="right">
				<div class="phone" @click="phonePopup">电话联系</div>
				<div class="message" @click="messagePopup">留言</div>
			</div>
		</div>
		<!-- 弹出层 -->
		<uni-popup ref="phonePopup" :is-mask-click="false" background-color="#fff">
			<div class="phoneContent">
				<div class="tip">
					<div></div>
					<div>打电话</div>
					<uni-icons type="closeempty" size="25" @click="closephonePopup"></uni-icons>
				</div>
				<div class="content">
					<div class="text">请拨打下方电话联系工作人员</div>
					<call></call>
				</div>
			</div>
		</uni-popup>
		<uni-popup ref="messagePopup" :is-mask-click="false" background-color="#fff">
			<div class="message">
				<div class="tip">
					<div></div>
					<div>留言</div>
					<uni-icons type="closeempty" size="25" @click="closeMessagePopup"></uni-icons>
				</div>
				<div class="content">
					<message v-model="form.value"></message>
				</div>
				<div class="messageButton">
					<div class="confirm" @click="commit">提交按钮</div>
					<div class="cancel" @click="closeMessagePopup">取消</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import { getSolutionById } from '../../../api/solutions/solutions';
import { favoriteSolution } from '../../../api/favorite/favorite';
import { addDialog } from '../../../api/dialog/dialog';
import store from '../../../store';
export default {
	components: {},
	data() {
		return {
			title: '标题',
			keywordList: ['关键词1', '关键词2', '关键词3', '关键词4', '关键词5', '关键词1', '关键词2', '关键词3', '关键词4', '关键词5'],
			content: '内容',
			favorite: false,
			videoUrl: '',
			id: 0,
			form:{
				value:'',
				name:store.getters.name,
				phone:store.getters.phone,
				solutionId:null,
				type:0
			}
		};
	},
	async onLoad(options) {
		this.form.solutionId=options.id
		await this.getSolution(options.id);
	},
	methods: {
		async getSolution(solutionId) {
			const {
				data: { solutionName, categories, videoUrl, favorite, details, id }
			} = await getSolutionById(solutionId);
			this.title = solutionName;
			this.keywordList = categories.map((item) => {
				return item.categoryName;
			});
			this.videoUrl = videoUrl;
			this.content = details;
			(this.favorite = favorite), (this.id = id);
		},
		async collection() {
			try {
				// 发起收藏请求
				await favoriteSolution(this.id, !this.favorite);
				// 触发事件修改颜色
				this.favorite = !this.favorite;
			} catch {
				console.log('报错');
			}
		},
		phonePopup() {
			this.$refs.phonePopup.open();
		},
		closephonePopup() {
			this.$refs.phonePopup.close();
		},
		messagePopup() {
			this.$refs.messagePopup.open();
		},
		closeMessagePopup(){
			this.$refs.messagePopup.close();
		},
		async commit(){
			console.log("提交")
			// 校验用户姓名和电话是否存在
			this.form.value=this.form.value.trim()
			console.log(!this.form.name || !this.form.phone)
			if(this.form.value===''){
				this.$modal.msgError('留言不能为空')
				return
			}
			if (!this.form.name || !this.form.phone) {
				uni.navigateTo({
					url:'/pages/mine/info/edit'
				})
				return
			}
			// 发出请求
			const res= await addDialog(this.form)
			console.log(res)
			this.closeMessagePopup()
			this.$modal.msgSuccess ('提交成功')
		}
	},
	onShareAppMessage() {
		return {
			title: this.title,
			path: `/pages/common/solutionDetail/index`
			// imageUrl封面图
		};
	}
};
</script>

<style lang="less" scoped>
.solutionDetail {
	padding: 20rpx;
	.title {
		text-align: center;
		font-size: 40rpx;
	}
	.keyWord {
		margin: 40rpx 0;
		border-radius: 30rpx;
		background-color: #fff;
		.title {
			font-size: 20rpx;
			color: #ECF0F1s;
			line-height: 30rpx;
			height: 30rpx;
		}
		.content {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx;
			.item {
				height: 40rpx;
				line-height: 40rpx;
				border: 1rpx solid #2ecc71;
				margin: 10rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
			}
		}
	}
	.video {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		.title {
			line-height: 30rpx;
			height: 30rpx;
			font-size: 20rpx;
			color: #ECF0F1s;
		}
	}
	.richText {
		margin-top: 40rpx;
		margin-bottom: 100rpx;
		border-radius: 50rpx;
		padding: 20rpx;
		background-color: #fff;
	}
	.button {
		margin: 0 -20rpx;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #fff;
		height: 80rpx;
		align-items: center;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			width: 150rpx;
			justify-content: space-between;
			color: #808080;
			.box {
				/* 移除默认样式 */
				background: none; /* 移除背景颜色 */
				border: none; /* 移除边框 */
				padding: 0; /* 移除内边距 */
				margin: 0; /* 移除外边距 */
				outline: none; /* 移除焦点轮廓 */
				box-shadow: none; /* 移除阴影 */
				appearance: none; /* 移除平台特定的外观 */
				/* 可选：添加一些自定义样式 */
				outline: none; /* 移除轮廓线 */

				width: 75rpx; /* 设置宽度 */
				height: 80rpx; /* 设置高度 */
				line-height: 38rpx;
				border-radius: 10px; /* 圆角 */
				font-size: 20rpx;
				display: flex; /* 使用 Flexbox 布局 */
				justify-content: center; /* 水平居中 */
				align-items: center; /* 垂直居中 */
				cursor: default; /* 默认光标样式 */
			}
			.collect {
				display: flex;
				align-items: center;
				flex-direction: column;
			}
			.share {
				display: flex;
				align-items: center;
				flex-direction: column;
				color: #808080;
				.iconfont {
					font-size: 40rpx;
				}
			}
		}
		.right {
			display: flex;
			height: 60rpx;
			line-height: 60rpx;
			width: 300rpx;
			.phone {
				text-align: center;
				width: 150rpx;
				background-color: #9edbf6;
				border-top-left-radius: 30px; /* 左上角圆角半径 */
				border-bottom-left-radius: 30px; /* 左下角圆角半径 */
			}
			.message {
				text-align: center;
				width: 150rpx;
				background-color: #035b7f;
				border-top-right-radius: 30px; /* 左上角圆角半径 */
				border-bottom-right-radius: 30px; /* 左下角圆角半径 */
			}
		}
	}
	.phoneContent {
		width: 600rpx;
		border-radius: 30rpx;
		.tip {
			// background-color: red;
			display: flex;
			justify-content: space-between;
			height: 70rpx;
			padding: 0 10rpx;
			border-bottom: 1px solid #d3d3d3;
			line-height: 70rpx;
		}
		.content {
			padding: 20rpx;
		}
	}
	.message {
		width: 600rpx;
		.tip {
			display: flex;
			justify-content: space-between;
			height: 70rpx;
			padding: 0 10rpx;
			border-bottom: 1px solid #d3d3d3;
			line-height: 70rpx;
		}
		.content {
			padding: 20rpx;
		}
		.messageButton {
			display: flex;
			justify-content: space-around;
			.confirm,
			.cancel {
				border: 1rpx solid #d3d3d3;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}
			.confirm {
				background-color: #00060a;
				color: #fff;
			}
			.cancel {
				color: #565656;
			}
		}
	}
}
</style>
